<template>
    <div>{{ person.name }} - {{ person.age }} - {{ person.work.score }} <button @click="person.age += 1">点我 +1</button><button
            @click="person.work.score += 1">点我 +1</button></div>
</template>

<script>
import { shallowReactive, reactive, shallowRef } from 'vue';

export default {
    name: "Demo",
    setup() {
        // shallowReactive 只处理对象最外层属性的响应式
        // const person = shallowReactive({
        //     name: '张三',
        //     age: 18,
        //     work: {
        //         score: 20
        //     }
        // })

        // shallowReactive 只将对象包装成 refImpl，并不将引用类型数据转换成 proxy 对象进行响应式处理
        const person = shallowRef({
            name: '张三',
            age: 18,
            work: {
                score: 20
            }
        })

        console.log(person)

        return {
            person
        }
    },
};
</script>

<style></style>
